<template>
	<div id="zhouyou-box">
		<div class="zhouyou-top">
			<div class="zhouyou-jianbian">
				<span class="span1"></span>
				<h4>周末出游</h4>
				<span class="span2"></span>
			</div>
			<p>致力推荐超完美套餐</p>
		</div>
		<div class="zhouyou-bottom">
			<div class="zhouyou-show">
				<ul>
					<li>
						<img src="../../../public/img/daocheng.jpg"/>
						<span>稻城</span>
					</li>
					<li>
						<img src="../../../public/img/lijiang.jpg"/>
						<span>丽江</span>
					</li>
					<li>
						<img src="../../../public/img/jiuzhaigou.jpg"/>
						<span>九寨沟</span>
					</li>
					<li>
						<img src="../../../public/img/sanya.jpg"/>
						<span>三亚</span>
					</li>
					<li>
						<img src="../../../public/img/lunbotu04.jpg"/>
						<span>澳门</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name: 'zhouyou'
	}
</script>

<style>
	#zhouyou-box{width: 100%;height: 200px;margin-top: 5px;}
	.zhouyou-top{width: 100%;height: 50px;background: white;}
	.zhouyou-top p{text-align: center;font-size: 12px;opacity: 0.7;}
	#zhouyou-box .zhouyou-jianbian{width: 100%;height: 30px;display: flex;justify-content: space-around;padding: 5px;}
	.zhouyou-jianbian span{display: inline-block; width: 100px;height: 8px;margin-top: 6px;}
	.zhouyou-jianbian .span1{background:linear-gradient(90deg,white,#8BB7DA);}
	.zhouyou-jianbian .span2{background:linear-gradient(-90deg,white,#8BB7DA);}
	
	.zhouyou-bottom{width: 100%;height: 130px;}
	.zhouyou-bottom .zhouyou-show{width: 100%;height: 130px;overflow: hidden;overflow-x: scroll;}
	.zhouyou-bottom ul{width: 200%;height: 130px;display: flex;}
	.zhouyou-bottom ul li{width: 38%;height: 130px;margin-left: 1%;text-align: center;}
	.zhouyou-bottom li img{width: 100%;height:100px ;}
	.zhouyou-bottom span{display: inline-block;padding-top: 5px;}
</style>